body {
    margin: 0;
    overflow: hidden;
    background-color: #1a1a2e;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

#toolboxButton {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    color: white;
    background: transparent;
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10; /* Ensure it's on top of the canvas */
    transition: background-color 0.3s, color 0.3s;
    font-family: "VegasB";
}

#toolboxButton:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(30, 30, 46, 0.9); /* Slightly transparent background */
    color: white;
    padding: 20px;
    text-align: center;
    z-index: 9; /* Ensure it's behind the toolbox button */
    transform: translateY(100%); /* Initially hidden */
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box; /* Include padding in width calculation */
    border-top: 1px solid white;
    display: flex; /* Use flexbox to arrange buttons in a row */
    justify-content: center; /* Center buttons horizontally */
    gap: 10px; /* Add some space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line if needed */
}

/* @tweakable [The color of the vertical separator line in the toolbox.] */
.sidebar-separator {
    border-left-color: white;
    /* @tweakable [The thickness of the vertical separator line in the toolbox.] */
    border-left-width: 1px;
    border-left-style: solid;
    height: 100%;
    margin-left: 10px; /* Add some space to the left of the separator */
    margin-right: 10px; /* Add some space to the right of the separator */
}

.sidebar.open {
    transform: translateY(0); /* Slide into view */
}

#randomizeButton,
#attractToCursorButton,
#addBoidsButton,
#removeBoidsButton {
    padding: 10px 20px;
    color: white;
    background: transparent;
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-family: "VegasB";
}

#randomizeButton:hover,
#attractToCursorButton:hover,
#addBoidsButton:hover,
#removeBoidsButton:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

#attractToCursorButton.active,
#attractToCursorButton:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}